<template>
  <!--内容-->
  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div style="background-color: #f2f2f2;">
        <!--采购单-->
        <template v-for="p in list" :key="p.id">
          <div class="item">
            <div class="pur">
              <span>订单编号:{{ p.code }}</span>
              <span style="color:red" v-if="p.auditStatus == 1">待审核</span>
              <span style="color:red" v-if="p.auditStatus == 2">已审核</span>
              <span style="color:red" v-if="p.auditStatus == 3">已拒绝</span>
            </div>

            <div class="line"></div>

            <!--商品-->
            <template v-for="(d, i) in p.detail" :key="i">
              <div class="goods">
                <div class="goodsname">
                  <div>
                    {{ d.goodsname }}
                  </div>
                </div>

                <div class="goodsitem">
                  <div class="lable">采购单价</div>
                  <div class="value">￥{{ d.price }}</div>
                </div>
                <div class="goodsitem">
                  <div class="lable">数量</div>
                  <div class="value">{{ d.num }}</div>
                </div>
                <div class="goodsitem">
                  <div class="lable">采购金额</div>
                  <div class="value">￥{{ d.money }}</div>
                </div>
              </div>
            </template>
            <div class="goodsfoot">
              <span class="btn" @click="enter(p.id)">查看详情</span>
            </div>
          </div>
        </template>
      </div>
    </van-list>
  </van-pull-refresh>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { queryPurchase } from "@/api/purchase.js";
import { useRouter } from "vue-router";
import { List as VanList, PullRefresh as VanPullRefresh } from "vant";
//路由实例
const router = useRouter();

//采购数据
const list = ref([]);

const aStatus = ref(0)

//分页数据
const page = ref(1);
const pageSize = ref(3);
const total = ref(0);

//下拉刷新数据
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);

//采购单数量
const purchaseNum = ref(0)

//方法区

//定义事件
const emits = defineEmits(["getNum"])

//获取采购单数量方法
let sendNum = ()=>{
  emits("getNum",purchaseNum)
}
//查看详情方法
let enter = (id) => {
  router.push({
    name: "detail",
    query: {
      id,
    },
  });
};

//下拉刷新方法
let onRefresh = () => {
  //加载中
  refreshing.value = true;
  page.value = 1;
  finished.value=false;
  init();
};

//触底方法
let onLoad = () => {
  if (total.value == 0) {
    //说明第一次
    init();
    return;
  }
  //总页数
  let pageCount = ref(
    total.value % pageSize.value == 0
      ? total.value / pageSize.value
      : total.value / pageSize.value + 1
  );
  let newPageCount = Math.floor(pageCount.value)
  if (page.value < newPageCount) {
    //没有触底 页数加1
    page.value = page.value + 1;
    //查询数据
    init();
  } else {
    finished.value = true;
  }
};

//采购列表方法
let init = async () => {
  let data = {
    eid: 1,
    page: page.value,
    pageSize: pageSize.value,
    auditStatus: aStatus.value
  };
  let res = await queryPurchase(data);
  if (res.code == 200) {
    if (page.value == 1) {
      list.value = res.data.list;
      purchaseNum.value=res.data.total
    } else {
      let NewList = list.value.concat(res.data.list);
      list.value = NewList;
    }

    page.value = res.data.page;
    pageSize.value = res.data.pageSize;
    total.value = res.data.total;
  }
  refreshing.value = false;
  loading.value = false;
};

//切换标签时 调用的方法
let chgInit = async(auditStatus)=>{
  page.value=1
   finished.value=false;
  aStatus.value=auditStatus
  await init()
}
//暴露方法
defineExpose({ chgInit });

onMounted(() => {
  // init();
  sendNum()
});
</script>

<style scope>
.item {
  width: 7.5rem;
  border-top: 1px solid #e1e1e1;
  border-bottom: 1px solid #e1e1e1;
  margin-bottom: 0.2rem;
  background-color: #fff;
}
.row {
  padding: 0.1rem;
  height: 0.5rem;
  line-height: 0.5rem;
  color: #666666;
}
.pur {
  display: flex;
  justify-content: space-between;
  width: 7rem;
  height: 0.8rem;
  line-height: 0.8rem;
  font-size: 14px;
  margin: auto;
}
.line {
  border-bottom: 1px solid #e2e2e2;
}
.goods {
  width: 6.5rem;
  margin: 0 auto;
}
.goodsname {
  margin: 0.3rem 0;
  margin-bottom: 0.18rem;
  height: 0.6rem;
  line-height: 0.3rem;
  font-size: 14px;
  color: #666666;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.goodsitem {
  display: flex;
  text-align: center;
  font-size: 16px;
  height: 0.65rem;
  line-height: 0.65rem;
  border: 1px solid #e1e1e1;
  border-top: none;
}
.lable {
  width: 2.5rem;
  background-color: #0099ff;
  color: #fff;
}
.value {
  width: 4rem;
}
.goodsfoot {
  text-align: right;
  height: 0.5rem;
  margin: 0.4rem 0;
}
.btn {
  background-color: #0099ff;
  font-size: 14px;
  color: #fff;
  padding: 0.15rem 0.1rem;
  border-radius: 0.1rem;
}
</style>
